<template>
  <div class="policy-detail">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="主要职能" name="info">
        <slot name="detail"></slot>
      </el-tab-pane>
      <!-- <el-tab-pane label="资讯汇总" name="second">
        <el-form :model="newsForm" class="filter-box">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="名称">
                <el-input v-model="newsForm.title" placeholder="资讯名称">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="文号">
                <el-input
                  v-model="newsForm.proof"
                  placeholder="文号名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="批次">
                <el-select
                  class="w-full"
                  v-model="newsForm.batchs"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="选择批次"
                >
                  <el-option
                    v-for="item in batchs"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="性质">
                <el-select
                  class="w-full"
                  v-model="newsForm.characters"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="选择资讯性质"
                >
                  <el-option
                    v-for="item in characters"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="成文日">
                <el-date-picker
                  v-model="newsForm.completeTime"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="选择成文日"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" plain @click="queryNews"
                >查询</el-button
              >
              <el-button type="info" plain @click="resetNewsForm"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <el-table
          class="el-table"
          v-loading="newsLoading"
          element-loading-text="正在拼命加载中..."
          :row-class-name="tableRowClassName"
          :data="topNews"
          :default-sort="{ prop: 'date', order: 'descending' }"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column label="资讯名称" width="500" show-overflow-tooltip>
            <template #default="props">
              <el-link
                type="primary"
                :underline="false"
                :href="`${currHost}/detail?id=${props.row.id}&searchType=1`"
                target="_blank"
              >
                {{ props.row.title }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="文号" width="200" show-overflow-tooltip>
            <template #default="props">
              <el-tag class="ml-2" v-if="props.row.proof">
                {{ props.row.proof }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="批次" prop="year" align="center" />
          <el-table-column label="性质" prop="character" />
          <el-table-column label="成文日期" prop="completeTimeStr" />
        </el-table>
      </el-tab-pane> -->
      <el-tab-pane label="关系图谱" name="atlas">
        <div class="atlas-list">
          <template v-for="item in atlasList" :key="item.type">
          <div
            class="atlas-item"
            @click="openNewPage('relationImg', item.type,'3')"
            v-if="item.type=='6'&&detailInfo.existPolicy=='1'||item.type=='5'"
          >
            <img
              v-if="item.type != 2"
              src="../../../../assets/image/atlas1.jpg"
            />
            <img
              v-else-if="item.type == 2"
              src="../../../../assets/image/atlas2.jpg"
            />
            <p>{{ item.label }}</p>
          </div>
          </template>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted } from "vue";
import { useDetailHook } from "../hooks";
import { useDetailHooks } from '../../hooks'
const props = defineProps(["info"]);

onMounted(() => {
  setTimeout(() => {
    console.log(props.info);
  }, 5000);
});

const tableRowClassName = ({
  row,
  rowIndex
}: {
  row: any;
  rowIndex: number;
}) => {
  if (row.type === 2) {
    return "info-row";
  } else {
    return "";
  }
};
const {detailInfo} = useDetailHooks()
console.log(props.info)
const {
  activeTab,
  topNews,
  batchNews,
  newsForm,
  characters,
  batchs,
  checkTag,
  queryNews,
  resetNewsForm,
  newsLoading,
  currHost,
  openNewPage,
  atlasList
} = useDetailHook(props, "2");
</script>

<style scoped lang="postcss">
.policy-detail {
  :deep(.el-table) {
    .info-row {
      --el-table-tr-bg-color: #ecf5ff;
    }
  }

  .filter-box {
    @apply mb-4 flex bg-white p-4 px-3 rounded-md;
    .date-picker,
    .nature-picker {
      @apply flex items-center;
      .filter-label {
        @apply mr-3 font-bold;
      }
    }
    .date-picker {
      @apply mr-8;
      :deep(.el-check-tag) {
        @apply bg-gray-200;
        .is-checke {
          @apply bg-red-400;
        }
      }
      :deep(.el-check-tag.is-checked) {
        @apply bg-theme-color text-white;
      }
    }
    .nature-picker {
      @apply mr-8;
    }
  }

  .data-pie-list {
    @apply flex flex-wrap;
    .pie-item {
      @apply mr-8 p-2 bg-white cursor-pointer rounded-md;
      transition: 0.4s all;
      &:hover {
        @apply bg-theme-color text-white;
      }
      img {
        width: 170px;
        height: 150px;
      }
      p {
        @apply text-center mt-2 font-bold;
      }
    }
  }
  .atlas-list {
    @apply flex items-center;
    .atlas-item {
      @apply mr-8 p-2 bg-white cursor-pointer rounded-md;
      transition: 0.4s all;
      &:hover {
        @apply bg-theme-color text-white;
      }
      img {
        width: 170px;
        height: 150px;
      }
      p {
        @apply text-center mt-2 font-bold;
      }
    }
  }
}
</style>
